<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文本</title>
<link href="../../css/style.css" rel="stylesheet" type="text/css" />
  <script type="text/javascript" src="../../js/jquery.js"></script>
  <script type="text/javascript" src="../../js/api.js"></script>
  <script type="text/javascript" src="../../js/axios.js"></script>
</head>

<body>
<div class="place"> <span>位置：</span>
  <ul class="placeul">
    <li>仓库管理</li>
    <li>库存管理</li>
    <li>基本内容</li>
  </ul>
</div>
<div class="rightinfo">
  <form action="" method="post" id="fo8">
    <ul class="tools">
      <li>仓库名称:
        <input type="text" name="name" />
      </li>
      <li>商品品牌:
        <input type="text" name="brandName"/>
      </li>
      <li>商品类型:
        <input type="text" name="type"/>
      </li>
      <li>商品名称:
        <input type="text" name="storeName"/>
      </li>
      <li class="subBut" onclick="load(1,5)"><img src="../../images/t06.png" />查询</li>
    </ul>
    <table class="tablelist">
      <thead>
        <tr>
          <th>序号</th>
          <th>仓库名称</th>
          <th>商品品牌</th>
          <th>商品类型</th>
          <th>商品名称</th>
          <th>厂商名称</th>
          <th>商品数量</th>
          <th>单位</th>
        </tr>
      </thead>
      <tbody id="body">
<!--        <tr>-->
<!--          <td>1</td>-->
<!--          <td>南京21号仓库</td>-->
<!--          <td>联想</td>-->
<!--          <td>笔记本</td>-->
<!--          <td>X260i</td>-->
<!--          <td>北京联想科技股份有限公司</td>-->
<!--          <td>100</td>-->
<!--          <td>台</td>-->
<!--        </tr>-->
<!--        <tr>-->
<!--          <td>2</td>-->
<!--          <td>南京21号仓库</td>-->
<!--          <td>联想</td>-->
<!--          <td>笔记本</td>-->
<!--          <td>X260i</td>-->
<!--          <td>北京联想科技股份有限公司</td>-->
<!--          <td>100</td>-->
<!--          <td>台</td>-->
<!--        </tr>-->
<!--        <tr>-->
<!--          <td>3</td>-->
<!--          <td>南京21号仓库</td>-->
<!--          <td>联想</td>-->
<!--          <td>笔记本</td>-->
<!--          <td>X260i</td>-->
<!--          <td>北京联想科技股份有限公司</td>-->
<!--          <td>100</td>-->
<!--          <td>台</td>-->
<!--        </tr>-->
<!--        <tr>-->
<!--          <td>4</td>-->
<!--          <td>南京21号仓库</td>-->
<!--          <td>联想</td>-->
<!--          <td>笔记本</td>-->
<!--          <td>X260i</td>-->
<!--          <td>北京联想科技股份有限公司</td>-->
<!--          <td>100</td>-->
<!--          <td>台</td>-->
<!--        </tr>-->
      </tbody>
    </table>
    <div class="pagin">
      <div class="message">共<i class="blue" id="total">1256</i>条记录，当前显示第&nbsp;<i class="blue" id="current">2&nbsp;</i>页</div>
      <ul class="paginList" id="page">
        <li class="paginItem"><a href="javascript:;"><span class="pagepre"></span></a></li>
        <li class="paginItem"><a href="javascript:;">1</a></li>
        <li class="paginItem current"><a href="javascript:;">2</a></li>
        <li class="paginItem"><a href="javascript:;">3</a></li>
        <li class="paginItem"><a href="javascript:;">4</a></li>
        <li class="paginItem"><a href="javascript:;">5</a></li>
        <li class="paginItem more"><a href="javascript:;">...</a></li>
        <li class="paginItem"><a href="javascript:;">10</a></li>
        <li class="paginItem"><a href="javascript:;"><span class="pagenxt"></span></a></li>
      </ul>
    </div>
  </form>
</div>
<script type="text/javascript">
	$('.tablelist tbody tr:odd').addClass('odd');
</script>
</body>
</html>
<script type="text/javascript">
  $(function () {
    var pageNum = 1;
    var pageSize = 5;
    load(pageNum,pageSize);
  });

  function load(pageNum,pageSize) {
    var dataArr = $("#fo8").serialize()
    dataArr += "&pageNum=" + pageNum +"&pageSize="+pageSize
    axiosRequest("post", "/warehouse/manage", dataArr)
            .then((res) => {
              var lis = "";
              console.log(res.data)
              for (var i = 0; i < res.data.data.length; i++) {
                var ls = "<tr>\n" +
                        "          <td>"+(i+1)+"</td>\n" +
                        "          <td>"+res.data.data[i].warehouse.cName+"</td>\n" +
                        "          <td>"+res.data.data[i].brand.brandName+"</td>\n" +
                        "          <td>"+res.data.data[i].type.typeName+"</td>\n" +
                        "          <td>"+res.data.data[i].product.productModel+"</td>\n" +
                        "          <td>"+res.data.data[i].firm.firmName+"</td>\n" +
                        "          <td>"+res.data.data[i].repertory+"</td>\n" +
                        "<td>"+res.data.data[i].product.productUnit+"</td>"+
                        "</tr>"
                lis+=ls;
              }
              $("#body").html(lis);
              $('.tablelist tbody tr:odd').addClass('odd');

              $("#total").html(res.data.totalCount)
              $("#current").html(res.data.pageNum)
              //  页码
              var begin = res.data.pageNum-1<=1?1:res.data.pageNum-1;
              var end = res.data.pageNum+1>=res.data.totalPage?res.data.totalPage:res.data.pageNum+1;
              //限制显示页码
              var pageBegin;
              var pageEnd;
              if (res.data.totalPage<6){
                pageBegin = 1;
                pageEnd = res.data.totalPage;
              }else {
                pageBegin = res.data.pageNum-3;
                pageEnd = res.data.pageNum+2;
                if (pageBegin<1){
                  pageBegin = 1;
                  pageEnd = pageBegin+5;
                }
                if (pageEnd>res.data.totalPage){
                  pageEnd = res.data.totalPage;
                  pageBegin = pageEnd-5;
                }
              }
              var lis2 = "<li class=\"paginItem\"><a href=\"javascript:;\" onclick='load("+begin+","+pageSize+")'><span class=\"pagepre\"></span></a></li>";
              for (var i = pageBegin; i <= pageEnd; i++) {
                var li;
                if (res.data.pageNum==i){
                  li = "<li class=\"paginItem current\"><a href=\"javascript:;\" onclick='load("+i+","+pageSize+")'>"+i+"</a></li>"
                }else {
                  li = " <li class=\"paginItem\"><a href=\"javascript:;\" onclick='load("+i+","+pageSize+")'>"+i+"</a></li>";
                }
                lis2+=li;
              }
              lis2+="<li class=\"paginItem\"><a href=\"javascript:;\" onclick='load("+end+","+pageSize+")'><span class=\"pagenxt\"></span></a></li>"
              $("#page").html(lis2)

            })
  }
</script>
